<script setup>
const props = defineProps({
  value: {
    type: String,
    default: '',
  },
});
const emits = defineEmits([
  'update:value',
]);

function onClick() {
  emits('update:value', props.value === 'asc' ? 'desc' : 'asc');
}
</script>

<template>
  <div
    class="sort-button"
    @click="onClick"
  >
    <slot />
    <span class="caret-wrapper">
      <i class="sort-caret ascending" :class="{ active: props.value === 'asc' }" />
      <i class="sort-caret descending" :class="{ active: props.value === 'desc' }" />
    </span>
  </div>
</template>

<style lang="scss" scoped>
.sort-button {
  padding: 8px 16px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  position: relative;
  user-select: none;

  &:hover {
    border-color: #c0c4cc;
    background-color: #f5f7fa;
  }
}
.caret-wrapper {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  height: 14px;
  width: 24px;
  vertical-align: middle;
  cursor: pointer;
  overflow: initial;
  position: relative;

  .sort-caret {
    width: 0;
    height: 0;
    border: solid 5px transparent;
    position: absolute;
    left: 7px;

    // 升序
    &.ascending {
      border-bottom-color: #999;
      top: -5px;

      // 高亮
      &.active {
        border-bottom-color: red;
      }
    }

    // 降序
    &.descending {
      border-top-color: #999;
      bottom: -5px;

      // 高亮
      &.active {
        border-top-color: red;
      }
    }

  }
}


</style>
